<template>
  <v-app v-resize="checkIsMobile">
    <v-app-bar v-if="flag.isMobile"  color="rgb(35, 52, 68)" app fixed  elevate-on-scroll :clipped-left="!flag.isMobile">
      <!-- 图标 -->
      <v-app-bar-nav-icon @click="flag.showDrawer = !flag.showDrawer" style="color: white"></v-app-bar-nav-icon>


      <v-spacer></v-spacer>
      <!-- 标题 -->
      <v-toolbar-title @click="$router.push('/home')" class="font-weight-bold text-center text-h6" style="cursor: pointer; color: #62bcc4">Vignetting</v-toolbar-title>
    </v-app-bar>

    <v-navigation-drawer style="padding: calc(5% + 10px) 5px 10px" light fixed :class="flag.isMobile?'my-navigation-mobile':'my-navigation'" height="auto" color="rgb(35, 52, 68)" v-model="flag.showDrawer" :temporary="flag.isMobile" :floating="flag.isMobile" :permanent="!flag.isMobile"  app >

      <!-- 头像部分 -->
      <div style="margin: 25px auto; text-align: center">
        <v-avatar size="88">
          <v-img contain alt="头像" src="./assets/img/avatar.jpg">

          </v-img>
        </v-avatar>
        <div style="font-weight: bold; font-size: 20px; margin-top: 15px; color: white">vignetting</div>
      </div>
      <v-divider></v-divider>

      <!-- 菜单部分 -->
      <div>
        <v-list>
          <v-list-item-group  v-model="information.activeMenu">
            <v-list-item value="/home" to="/home" active-class="active-menu">
              <v-list-item-icon><v-icon style="color: #eee8e8">mdi-home</v-icon></v-list-item-icon>
              <v-list-item-content style="color: #eee8e8">首页信息</v-list-item-content>
            </v-list-item>
            <v-list-item value="/management" to="/management" active-class="active-menu">
              <v-list-item-icon><v-icon style="color: #eee8e8">mdi-tag</v-icon></v-list-item-icon>
              <v-list-item-content style="color: #eee8e8">应用管理</v-list-item-content>
            </v-list-item>
            <v-list-item value="article" to="/article" active-class="active-menu">
              <v-list-item-icon><v-icon style="color: #eee8e8">mdi-script-text</v-icon></v-list-item-icon>
              <v-list-item-content style="color: #eee8e8">博文编辑</v-list-item-content>
            </v-list-item>
            <v-list-item @click="logout" value="logout" active-class="active-menu">
              <v-list-item-icon><v-icon style="color: #eee8e8">mdi-logout-variant</v-icon></v-list-item-icon>
              <v-list-item-content style="color: #eee8e8">退出登录</v-list-item-content>
            </v-list-item>
            <v-list-item @click="shutdown" value="shutdown" active-class="active-menu">
              <v-list-item-icon><v-icon color="red">mdi-power</v-icon></v-list-item-icon>
              <v-list-item-content style="color: red">关闭应用</v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </div>
      <v-divider></v-divider>

      <!-- 网站信息 -->
      <div style="position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); color: white">
        <div style="font-size: 14px; font-weight: 300; text-align: center">2020 vignetting</div>
        <div style="font-size: 14px; font-weight: 300; text-align: center">vignetting.top</div>
        <div style="font-size: 14px; font-weight: 300; text-align: center">蜀ICP备19033371号</div>
      </div>

    </v-navigation-drawer>


    <v-main style="background-color: rgb(241, 242, 247)">
      <div style="display: flex; justify-content: space-between; margin: 5px 5px; height: 54px; line-height: 54px">
        <!-- 导航显示 -->
        <div class="text-h6 text--black" style="height: 54px; line-height: 54px">{{$route.name}}</div>

        <!-- 日期 -->
        <div style="margin-right: 10px; display: flex; justify-content: space-between; font-size: 14px">
          <div style="background-color: rgb(37, 182, 167); color: white; width: 80px; text-align: center">
            <div style="height: 18px; line-height: 18px">{{myTime.week}}</div>
            <div style="height: 36px; line-height: 36px"><span style="margin-right: 5px; font-size: 24px; font-weight: 500">{{myTime.day}}</span>{{myTime.month}}</div>
          </div>
          <div style="width: 120px; color: rgb(37, 182, 167); background-color: white">
            <div style="height: 18px; line-height: 18px; text-align: center">{{myTime.m}}</div>
            <div style="height: 36px; line-height: 36px; text-align: center; font-size: 24px">{{myTime.time}}</div>
          </div>
        </div>
      </div>
      <keep-alive>
        <router-view @childloadingevent="childLoadingEvent" @childerror="childError"  :isMobile="flag.isMobile" :widthLevel="information.widthLevel">
          haha
        </router-view>
      </keep-alive>
    </v-main>

    <!-- 错误通知 -->
    <v-snackbar app elevation="6" v-model="flag.showError" :right="!flag.isMobile" :centered="flag.isMobile"  multi-line color="red lighten-1" rounded top>
      {{information.error}}
      <template v-slot:action="{ attrs }">
        <v-btn text v-bind="attrs" @click="flag.showError = false">
          Close
        </v-btn>
      </template>
    </v-snackbar>

    <!-- 加载页面 -->
    <v-overlay :value="flag.loading" opacity="1" color="white">
      <v-progress-circular style="position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%)" v-show="flag.loading" indeterminate size="96" color="primary"></v-progress-circular>
    </v-overlay>
  </v-app>
</template>

<script>


import Http from "./api/http";

export default {
  name: 'App',


  data: () => {
    return {
      flag: {
        isMobile: false,
        showDrawer: false,
        showError: false,
        loading: false
      },

      information: {
        activeMenu: "",
        widthLevel: 1,
        error: '',
      },

      myTime: {
        day: 1,
        month: '',
        week: '',
        time: '',
        m: '',
        format: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      }
    }
  },


  methods: {
    /* 检查是否为移动端 */
    checkIsMobile(){
      if(document.body.clientWidth < 800){
        if(this.flag.isMobile === false){
          this.flag.isMobile = true;
          this.flag.showDrawer = false;
        }
      }else {
        this.flag.isMobile = false;
        this.flag.showDrawer = true;
      }

      if(document.body.clientWidth < 800){
        this.information.widthLevel = 1;
      }else if(document.body.clientWidth < 1200){
        this.information.widthLevel =2;
      }else if(document.body.clientWidth < 1600){
        this.information.widthLevel = 3;
      }else {
        this.information.widthLevel = 4;
      }

    },

    /* 子组件加塞事件 */
    childLoadingEvent(flag){
      this.flag.childLoading = flag;
    },

    childError(error){
      this.flag.showError = true;
      this.information.error = error;
    },

    /* 退出登录 */
    logout(){
      // 1.给移动端发出登出请求
      Http.get("/common/logout", {
        params: {
          "account": this.$store.state.token.account
        }
      })

      // 2.清除Vuex中数据
      this.$store.commit("updateToken",{});

      // 3.清除localStorage中数据
      localStorage.removeItem("token");

      // 4.前往登录界面
      this.$router.push("/login");
    },

    /* 关闭应用 */
    shutdown(){
      Http.get("/management/shutdown").catch(fail=>{

      });
      window.close();
    }
  },


  created() {
    // 1.初始化
    let time = new Date();
    this.myTime.day = time.getDate();
    this.myTime.week = this.myTime.format[time.getDay()];
    if(time.getHours() > 12){
      this.myTime.time = (time.getHours()-12)+":"+time.getMinutes();
      this.myTime.m = '下午';
    }else {
      this.myTime.time = time.getHours()+":"+time.getMinutes();
      this.myTime.m = '上午';
    }
    this.myTime.month = this.myTime.format[7+time.getMonth()];

    // 2.定时任务
    setInterval(()=>{
      let time = new Date();
      this.myTime.day = time.getDate();
      this.myTime.week = this.myTime.format[time.getDay()];
      if(time.getHours() > 12){
        this.myTime.time = (time.getHours()-12)+":"+time.getMinutes();
        this.myTime.m = '下午';
      }else {
        this.myTime.time = time.getHours()+":"+time.getMinutes();
        this.myTime.m = '上午';
      }
      this.myTime.month = this.myTime.format[7+time.getMonth()];
    }, 60000)
  },


  watch: {
    "$route.path"(newValue, oldValue){
      if(newValue != undefined&&newValue != ""){
        this.information.activeMenu = newValue;
      }else if(newValue == ""){
        this.information.activeMenu = "/home";
      }
    }
  }
};
</script>

<style scoped>
  .my-navigation {
    height: 100%!important;
    padding: 7px 5px;
    width: calc(200px + 5%);
  }

  .my-navigation-mobile {
    height: 100%!important;
    padding: 7px 5px;
    width: calc(200px + 5%);
  }

</style>

<style>
  .active-menu {
    background-color: #2d3a4b;
    color: white !important;
  }
</style>